<?php 
	require_once("User.php");
	session_start();
	$db_connect = mysqli_connect("localhost", "root", "", "battleofthemages");

	if(isset($_SESSION['user'])){
		$user = unserialize($_SESSION['user']);
	}else{
		header("Location: index.php");
	}
?>
<!DOCTYPE html>
<html>
<head>
<title>Battle of the mages</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style/style.css" />
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<script type="text/javascript" src="scripts/script.js"></script>
</head>
<body onload="onLoadLogin();">
	<header class="header">
	<img alt="Battle of the Mages Logo" src="images/botm_logo.png" id="logo" width="572px" height="334px"/>
	</header>
	<section id="main_section" style="background-image: url('images/botm_bg_lobby.png'); background-position: top center;">
	<img src="images/botm_border.png" alt="border" id="border" width="1437px" height="1573px"/>
	<img src="images/Mage_portrait.jpg" alt="portrait" id="mage" width="150px" height="150px;"/>
		<div id="player_info">
			<p id="player_name"><?php echo $user->getUsername();?></p>
			<p id="player_rank">
			<?php
			$username = $user->getUsername();
			$query = "SELECT u.username as username, r.name as rank FROM user u INNER JOIN rank r on u.rank_id=r.rank_id WHERE u.username=\"$username\"";
			$result = mysqli_query($db_connect, $query);
			if(mysqli_num_rows($result) > 0){
				$row = mysqli_fetch_assoc($result);
				echo $row['rank'];
			}
			?></p>
			<form method="post">
                <input type="image" src="images/botm_logout.png" id="logout_button" name="logout"/>
                <input type="image" src="images/botm_battle.png" id="battle_button" name="battle"/>
			</form>
		</div>
		<div id="chat">
			<div id="lines"></div>
			<form method="post">
                <input type="image" src="images/botm_enter.png" id="chat_enter" name="battle" name="enter"/>
                <select name="players" id="online_players">
                </select>
				<input type="text" name="chat_line" placeholder="Enter chat message" id="chat_line" class="shadow"/>
			</form>
		</div>
        <div id="popup_box" style="background-image: url('images/botm_popup.png'); background-position: top center;">
            <input type="image" src="images/botm_accept.png" name="accept" id="accept"/>
            <input type="image" src="images/botm_decline.png" name="decline" id="decline"/>
        </div>
	</section>
    <footer>
        <ul id="footer_nav">
            <li><img src="images/botm_home.png"/></li>
            <li><img src="images/botm_howtoplay.png"/></li>
            <li><img src="images/botm_aboutus.png"/></li>
        </ul>
    </footer>
</body>
</html>

<?php
mysqli_close($db_connect);
?>